<template>
    <div class="main_account">
        <div class="back"><router-link to="/goHome/{username}">回到首页</router-link></div>
        <el-card class="content_account">
            <el-form :model="account" label-width="150px" class="form_account">
                <el-form-item label="username" class="label_account">
                    <el-input v-model="account.username" disabled />
                </el-form-item>
                <el-form-item label="password" class="label_account">
                    <el-input v-model="account.password" />
                </el-form-item>
                <el-form-item label="firstName" class="label_account">
                    <el-input v-model="account.firstname" />
                </el-form-item>
                <el-form-item label="lastName" class="label_account">
                    <el-input v-model="account.lastname" />
                </el-form-item>
                <el-form-item label="address" class="label_account">
                    <el-input v-model="account.address" />
                </el-form-item>
                <el-form-item label="city" class="label_account">
                    <el-input v-model="account.city" />
                </el-form-item>
                <el-form-item label="phone" class="label_account">
                    <el-input v-model="account.phone" />
                </el-form-item>
            </el-form>
            <el-button @click="updateAccountMessage" type="primary">修改信息</el-button>
            <el-button @click="logOut" type="primary">退出登录</el-button>
        </el-card>
        
    </div>
</template>

<script>
import routes from '../../router'
import axios from 'axios'
import { jwtDecode } from 'jwt-decode';
export default {
    name:   'AccountInfo',
    data(){
        return{
            token : localStorage.getItem('token'),
            username:jwtDecode(localStorage.getItem('token')).username,
            account :'',
        }
    },
    methods:{
        //使用结构赋值进行错误处理
        promise_error_process(promise){
            return promise.then(result=>[null,result])
                           .catch(err=>[err,null])
        },
        async getAccountByAjax(){
            const response = await axios({
                url :  `http://localhost:8081/users/${this.username}`,
                method : 'GET',
                withCredentials : true,
                headers :{
                    'Authorization': this.token // 将token放在请求头中
                }
            })
            return response
        },
        //获取账号
        async getAccount(){
            const [err,result] = await this.promise_error_process(this.getAccountByAjax())
            if(err){
                console.log('请求错误')
            }else{
                console.log(result.data.data)
                this.account = result.data.data
            }
        },
        async updateAccountByAjax(){
            const response = await axios({
                url :  'http://localhost:8081/messageUpdate',
                method : 'PUT',
                withCredentials : true,
                headers :{
                    'Content-Type' : 'application/json',
                    'Authorization': this.token // 将token放在请求头中
                },
                data : this.account
            })
            return response
        },
        //更新用户详细信息
        async updateAccountMessage(){
            const [err,result] = await this.promise_error_process(this.updateAccountByAjax())
            if(err){
                console.log('请求失败！')
            }else{
                console.log(result)
                //更换token
                this.token = result.data.data
                localStorage.removeItem('token')
                localStorage.setItem('token',this.token)
                this.username = jwtDecode(this.token)
                
            }
        },

        logOut(){
            routes.push({name: 'Login'})
            localStorage.removeItem('token')
        }
    },
    created(){
        this.getAccount()
    }
}
</script>

<style scope>
.main_account{
    text-align: center;
    width: 100%;
}
.back{
    padding-left: 6%;
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 20px;
    text-align: left;
}
.content_account{
    width: 90%;
    text-align: center;
    margin-left: 5%;
}
.label_account{
    font-size: 20px;
}
</style>